<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点击" id="btn">
<h2>第<span id="num">0</span>次点击</h2>
<script>
    function mySubString(search,s){
        var pos = s.lastIndexOf('#');
        if (pos!=-1){
            s = s.slice(0,pos);
        }

        return s;
    }
    function mySubStringAfter(search,s){
        var pos = s.lastIndexOf('#');
        if (pos!=-1){
            s = s.slice(pos+1);
        } else {
            s = 0;
        }

        return s;
    }

    var btn = document.getElementById('btn');
    var num = document.getElementById('num');
    var i = 0;
    btn.onclick = function(){
        i++;
        var data = {page:i,tt:'我是'}//希望保存的数据，保存在浏览器history对象中,传数据
        var s = mySubString('#',location.href)+'#'+i;
//        console.log(s);
//        location.href = s;
        history.pushState(data,null,s)

        num.innerHTML = i;

    }
    window.onpopstate = function(e){//e 是事件对象
        var data1 = e.state;//收数据
        console.log(data1);
        num.innerHTML = data1.page;
//        alert('a')
    }

    window.onload = function () {
        var pageI = mySubStringAfter('#',location.href);
        num.innerHTML = pageI;
    }

</script>
</body>
</html>